feat(react-motion): add useMotion hook #28699

marcosmoura · 2023-08-01T12:25:01Z

This PR implements the useMotion hook. This is part of the Component CSS Transitions/Animations on mount/unmount RFC efforts. A preview of the usage of this hook can be found in the feat: implement motion for Drawer PR.

This also creates a separate package to deal with motion related code. For now, we have only included one hook, but that can open up to have dedicated components to handle animations/transitions.

Context

Currently, there is a limitation in incorporating motion effects to components during their mounting or unmounting. This restricts the ability to apply CSS motion for components featuring an open/close behavior.
This hook effectively tracks CSS animations/transitions and returns the state of those animations/transitions.

Example

const [open, setOpen] = React.useState(false)
const motion = useMotion(open);

useMotion also accepts the same value it returns, in case useMotion was called somewhere else. This is extremely useful to avoid double calculation in case partners wants to override a default animation to a component:

const ExampleComponent = ({ open }: props) => {
  const motion = useMotion(open)

  // ...
}

const Override = () => {
  const [open, setOpen] = React.useState(false)
  const motion = useMotion(open);

  return <ExampleComponent open={motion} />
}

Return type

type MotionState<Element extends HTMLElement = HTMLElement> = {
  /**
   * Ref to the element.
   */
  ref: React.Ref<Element>;

  /**
   * Current state of the element.
   *
   * - `unmounted` - The element is not yet rendered or can be safely removed from the DOM.
   * - `entering` - The element is performing enter animation.
   * - `entered` - The element has finished enter animation.
   * - `idle` - The element is currently not animating, but rendered on screen.
   * - `exiting` - The element is performing exit animation.
   * - `exited` - The element has finished exit animation.
   */
  type: MotionType;

  /**
   * Indicates whether the component is currently rendered and visible.
   * Useful to apply CSS transitions only when the element is active.
   */
  active: boolean;

  /**
   * Indicates whether the component can be rendered.
   * This can be used to avoid rendering the component when it is not visible anymore.
   */
  canRender: boolean;
}

fabricteam · 2023-08-01T12:31:26Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`510 B` `330 B`
`global-context` createContextSelector	`537 B` `342 B`
`priority-overflow` createOverflowManager	`4.162 kB` `1.735 kB`
`react-accordion` Accordion (including children components)	`88.688 kB` `26.917 kB`
`react-alert` Alert	`81.668 kB` `21.964 kB`
`react-avatar` Avatar	`47.01 kB` `14.502 kB`
`react-avatar` AvatarGroup	`16.116 kB` `6.431 kB`
`react-avatar` AvatarGroupItem	`61.789 kB` `18.912 kB`
`react-badge` Badge	`23.183 kB` `7.254 kB`
`react-badge` CounterBadge	`24.084 kB` `7.553 kB`
`react-badge` PresenceBadge	`22.14 kB` `7.867 kB`
`react-button` Button	`36.91 kB` `9.685 kB`
`react-button` CompoundButton	`44.259 kB` `11.167 kB`
`react-button` MenuButton	`41.296 kB` `10.933 kB`
`react-button` SplitButton	`49.331 kB` `12.486 kB`
`react-button` ToggleButton	`53.956 kB` `11.582 kB`
`react-card` Card - All	`88.334 kB` `25.252 kB`
`react-card` Card	`83.177 kB` `23.742 kB`
`react-card` CardFooter	`9.338 kB` `3.932 kB`
`react-card` CardHeader	`11.589 kB` `4.707 kB`
`react-card` CardPreview	`10.297 kB` `4.317 kB`
`react-checkbox` Checkbox	`32.872 kB` `10.652 kB`
`react-combobox` Combobox (including child components)	`87.101 kB` `28.273 kB`
`react-combobox` Dropdown (including child components)	`85.555 kB` `27.926 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`66.446 kB` `18.441 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`203.68 kB` `57.903 kB`
`react-components` react-components: FluentProvider & webLightTheme	`37.787 kB` `12.387 kB`
`react-datepicker-compat` DatePicker Compat	`207.356 kB` `57.486 kB`
`react-dialog` Dialog (including children components)	`86.738 kB` `26.341 kB`
`react-divider` Divider	`17.098 kB` `6.303 kB`
`react-field` Field	`18.295 kB` `6.978 kB`
`react-image` Image	`12.029 kB` `4.783 kB`
`react-infobutton` InfoButton	`125.612 kB` `39.404 kB`
`react-infobutton` InfoLabel	`129.283 kB` `40.575 kB`
`react-input` Input	`23.237 kB` `7.688 kB`
`react-jsx-runtime` Classic Pragma	`1.049 kB` `531 B`
`react-jsx-runtime` JSX Dev Runtime	`2.752 kB` `1.277 kB`
`react-jsx-runtime` JSX Runtime	`3.27 kB` `1.519 kB`
`react-label` Label	`10.423 kB` `4.31 kB`
`react-link` Link	`13.254 kB` `5.397 kB`
`react-menu` Menu (including children components)	`135.721 kB` `41.662 kB`
`react-menu` Menu (including selectable components)	`138.407 kB` `42.17 kB`
`react-overflow` hooks only	`12.419 kB` `4.687 kB`
`react-persona` Persona	`53.905 kB` `16.371 kB`
`react-popover` Popover	`114.883 kB` `36.034 kB`
`react-portal` Portal	`12.255 kB` `4.504 kB`
`react-portal-compat` PortalCompatProvider	`6.48 kB` `2.203 kB`
`react-positioning` usePositioning	`25.137 kB` `9.109 kB`
`react-progress` ProgressBar	`13.718 kB` `5.476 kB`
`react-provider` FluentProvider	`18.332 kB` `6.817 kB`
`react-radio` Radio	`26.617 kB` `8.601 kB`
`react-radio` RadioGroup	`11.622 kB` `4.833 kB`
`react-select` Select	`24.599 kB` `8.651 kB`
`react-slider` Slider	`34.134 kB` `11.039 kB`
`react-spinbutton` SpinButton	`32.773 kB` `10.216 kB`
`react-spinner` Spinner	`19.668 kB` `7.024 kB`
`react-switch` Switch	`29.092 kB` `9.217 kB`
`react-table` DataGrid	`152.991 kB` `42.325 kB`
`react-table` Table (Primitives only)	`39.638 kB` `12.129 kB`
`react-table` Table as DataGrid	`126.247 kB` `33.617 kB`
`react-table` Table (Selection only)	`71.617 kB` `18.915 kB`
`react-table` Table (Sort only)	`70.236 kB` `18.516 kB`
`react-tags-preview` InteractionTag	`11.031 kB` `4.528 kB`
`react-tags-preview` Tag	`28.65 kB` `9.018 kB`
`react-tags-preview` TagGroup	`69.607 kB` `20.482 kB`
`react-text` Text - Default	`13.043 kB` `5.129 kB`
`react-text` Text - Wrappers	`16.215 kB` `5.447 kB`
`react-textarea` Textarea	`27.302 kB` `9.047 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`34.611 kB` `7.295 kB`
`react-theme` Teams: Light theme	`19.282 kB` `5.486 kB`
`react-toast` Toast (including Toaster)	`87.69 kB` `26.037 kB`
`react-tooltip` Tooltip	`48.1 kB` `16.875 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against 2147e3d60a21ff7ded34b27a19f3d5313533e910}

fabricteam · 2023-08-01T12:34:54Z

Perf Analysis (`@fluentui/react-components`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	660	620	5000
Button	mount	316	317	5000
Field	mount	1119	1095	5000
FluentProvider	mount	675	681	5000
FluentProviderWithTheme	mount	78	80	10
FluentProviderWithTheme	virtual-rerender	63	74	10
FluentProviderWithTheme	virtual-rerender-with-unmount	68	80	10
InfoButton	mount	13	12	5000
MakeStyles	mount	872	856	50000
Persona	mount	1728	1722	5000
SpinButton	mount	1367	1342	5000

fabricteam · 2023-08-01T12:46:08Z

🕵 fluentuiv9 No visual regressions between this PR and main

packages/react-components/react-utilities/src/hooks/useMotionPresence.ts

… presence requestAnimationFrame

…exist

codesandbox-ci · 2023-08-03T13:33:57Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 83ef7e1:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

size-auditor · 2023-08-03T13:40:52Z

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 2147e3d60a21ff7ded34b27a19f3d5313533e910 (build)

* master: chore(cxe-prg): migrate to new slot API (microsoft#28752) chore(teams-prg): migrate to new slot API (microsoft#28751) chore: re-export slot and assertSlots methods (microsoft#28755) Docs(react-tree): Improve docs and stories (microsoft#28741) feat: implements nested tree selection (microsoft#28668) applying package updates applying package updates feature(react-utilities): implements new slot methods (`slot` and `assertSlots`) (microsoft#28373) fix(TimePicker): Selection now works in locales that don't use "am"/"pm" in their time format (microsoft#28469) bugfix: ensures controlled state works properly + (microsoft#28665) feat(tokens): Add status color tokens (microsoft#28006) feat(tokens): Add colorBrandStroke2Contrast and colorNeutralStrokeAlpha2 (microsoft#28638) Made BreadcrumbButton consistent with Item and Link (microsoft#28672)

packages/react-components/react-utilities/src/hooks/useMotionPresence.ts

* master: chore: update CODEOWNERS to some components to tag the current owner (microsoft#28949) fix(react-popover): Only apply modal attributes if the PopoverSurface traps focus (microsoft#28613) feat(react-table, react-components): export DataGridContextProvider (microsoft#28955) chore: decrease bundle size & adds fixtures (microsoft#28962) feat(react-utilities): create useAnimationFrame hook (microsoft#28948) fix(react-utilities): `useOnClickOutside` should consider text selection from inside to outside as inside click (microsoft#28765) docs(react-accordion): Added subcomponents to index story (microsoft#28956) applying package updates bugfix: ensure interop between assertSlots and old API (microsoft#28957) chore: rename imports from react-tree to react-components (microsoft#28946) applying package updates fix: Autofill queries the inputElement ownerDocument instead of document (microsoft#27312)

.github/CODEOWNERS

packages/react-components/react-motion-preview/src/hooks/useMotion.ts

bsunderhus

The CODEOWNERS file change seems to be unnecessary?! besides that LGTM 👍🏻

Co-authored-by: Bernardo Sunderhus <[email protected]>

* master: feat(react-motion): add useMotion hook (microsoft#28699)

* master: (24 commits) feat(react-motion): add useMotion hook (microsoft#28699) feat: add closeOnIframeFocus prop to Popover (microsoft#28881) chore: updates .devcontainer to follow new format (microsoft#28990) Line Chart and Area Chart - Component tests (microsoft#28235) applying package updates 28576 small button is using 3px border radius (microsoft#28589) In PeoplePicker, we can now use arrow keys to move cursor around microsoft#28655 (microsoft#28975) chore: Migrate bot config to yml (microsoft#28981) fix(react-card): CardHeader grid layout ignoring line-height of content (microsoft#28968) fix(react-tags-preview): tag with secondary text has no top border under windows high contrast (microsoft#28963) applying package updates feat(Stack): Add deprecated flag to render null when receiving a falsy value (microsoft#28978) feat(react-infobutton): Add inline prop to InfoButton and make it inline by default (microsoft#28605) fix(Dialog): Add displayName for dialog footer and content (microsoft#28939) Revert "Keytips: Align keytipData with visible instance for dupes" (microsoft#28977) Vertical stacked bar chart - Component tests (microsoft#28594) docs: update drawer spec to be inline with changes to component (microsoft#28934) Table/DataGrid: fix visuals for overflow (microsoft#28940) Focus indicator bug in bar charts (microsoft#28414) Pie chart focus spacing (microsoft#28504) ...

* master: (26 commits) chore: Make triage bot add needs triage label to new issues (microsoft#28994) fix(react-tags-preview): use regular icon for dismiss (microsoft#28958) feat(react-motion): add useMotion hook (microsoft#28699) feat: add closeOnIframeFocus prop to Popover (microsoft#28881) chore: updates .devcontainer to follow new format (microsoft#28990) Line Chart and Area Chart - Component tests (microsoft#28235) applying package updates 28576 small button is using 3px border radius (microsoft#28589) In PeoplePicker, we can now use arrow keys to move cursor around microsoft#28655 (microsoft#28975) chore: Migrate bot config to yml (microsoft#28981) fix(react-card): CardHeader grid layout ignoring line-height of content (microsoft#28968) fix(react-tags-preview): tag with secondary text has no top border under windows high contrast (microsoft#28963) applying package updates feat(Stack): Add deprecated flag to render null when receiving a falsy value (microsoft#28978) feat(react-infobutton): Add inline prop to InfoButton and make it inline by default (microsoft#28605) fix(Dialog): Add displayName for dialog footer and content (microsoft#28939) Revert "Keytips: Align keytipData with visible instance for dupes" (microsoft#28977) Vertical stacked bar chart - Component tests (microsoft#28594) docs: update drawer spec to be inline with changes to component (microsoft#28934) Table/DataGrid: fix visuals for overflow (microsoft#28940) ...

marcosmoura added 2 commits August 1, 2023 14:15

feat: implement useMotionPresence hook

1faa4c8

docs: add missing change files

230e273

marcosmoura added Type: Feature Fluent UI react-components (v9) labels Aug 1, 2023

marcosmoura self-assigned this Aug 1, 2023

marcosmoura requested a review from a team as a code owner August 1, 2023 12:25

bsunderhus reviewed Aug 2, 2023

View reviewed changes

packages/react-components/react-utilities/src/hooks/useMotionPresence.ts Outdated Show resolved Hide resolved

bsunderhus reviewed Aug 2, 2023

View reviewed changes

packages/react-components/react-utilities/src/hooks/useMotionPresence.ts Outdated Show resolved Hide resolved

bsunderhus reviewed Aug 2, 2023

View reviewed changes

packages/react-components/react-utilities/src/hooks/useMotionPresence.ts Outdated Show resolved Hide resolved

marcosmoura added 4 commits August 2, 2023 17:09

fix: improve performance of duration calculation

b8128e7

feat: implement useAnimationFrame hook to help controlling the motion…

c721171

… presence requestAnimationFrame

fix: improve type definition to avoid typecast

6bbf319

fix: return a blank style declaration in case global "window" do not …

44b58d5

…exist

bsunderhus approved these changes Aug 3, 2023

View reviewed changes

marcosmoura added 3 commits August 3, 2023 15:18

fix: regenerate API

b3124d6

fix: regenerate API

caef0bd

Merge branch 'master' into feat/use-motion-presence-hook

ac4e941

marcosmoura added 6 commits August 3, 2023 17:23

revert: use RefCallback instead of Ref

8fa8f4a

fix: regenerate API

45ac91f

Merge branch 'master' into feat/use-motion-presence-hook

2497b77

fix: regenerate API

cceb832

feat: simplify API by removing redundant prop

d3cbded

ling1726 reviewed Aug 8, 2023

View reviewed changes

packages/react-components/react-utilities/src/hooks/useMotionPresence.ts Outdated Show resolved Hide resolved

marcosmoura changed the title ~~feat(react-utilities): add useMotionPresence hook~~ feat(react-motion-preview): add useMotion hook Aug 17, 2023

bsunderhus self-requested a review August 23, 2023 10:57

marcosmoura added 6 commits August 23, 2023 21:05

fix: remove outdated changefile

a1616d2

fix: use correct boolean values

74b8257

fix: improve typings and documentation

7942e80

Merge branch 'master' into feat/use-motion-presence-hook

2d89ef2

fix: use correct type for MotionOptions

f006b19

bsunderhus reviewed Aug 25, 2023

View reviewed changes

.github/CODEOWNERS Outdated Show resolved Hide resolved

bsunderhus reviewed Aug 25, 2023

View reviewed changes

packages/react-components/react-motion-preview/src/hooks/useMotion.ts Show resolved Hide resolved

bsunderhus reviewed Aug 25, 2023

View reviewed changes

packages/react-components/react-motion-preview/src/hooks/useMotion.ts Outdated Show resolved Hide resolved

bsunderhus reviewed Aug 25, 2023

View reviewed changes

packages/react-components/react-motion-preview/src/hooks/useMotion.ts Outdated Show resolved Hide resolved

bsunderhus approved these changes Aug 25, 2023

View reviewed changes

marcosmoura and others added 11 commits August 25, 2023 23:01

feat: refactor useMotion to a much more clean/performant logic

ab6f39b

fix: remove debug function

f66a01e

fix: set motion as active when animations are disabled

006fc84

fix: upgrade tests

03a806a

fix: remove duplicated code due to a merge conflict

bb450b8

fix: revert changes to CODEOWNERS

e135084

fix: generate new API documentation

55aee81

Merge branch 'master' into feat/use-motion-presence-hook

a9c61f3

fix: remove ref from dependencies

c5e204d

Co-authored-by: Bernardo Sunderhus <[email protected]>

Merge branch 'master' into feat/use-motion-presence-hook

06ae5c6

fix: wrong merge

83ef7e1

marcosmoura enabled auto-merge (squash) August 28, 2023 12:32

marcosmoura merged commit 18e53d3 into microsoft:master Aug 28, 2023

marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Aug 28, 2023

Merge branch 'master' into feat/add-motion-to-drawer

7ae29c2

* master: feat(react-motion): add useMotion hook (microsoft#28699)

marcosmoura deleted the feat/use-motion-presence-hook branch August 28, 2023 16:12

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(react-motion): add useMotion hook #28699

feat(react-motion): add useMotion hook #28699

marcosmoura commented Aug 1, 2023 •

edited

Loading

fabricteam commented Aug 1, 2023 •

edited

Loading

fabricteam commented Aug 1, 2023 •

edited

Loading

fabricteam commented Aug 1, 2023 •

edited

Loading

codesandbox-ci bot commented Aug 3, 2023 •

edited

Loading

size-auditor bot commented Aug 3, 2023 •

edited

Loading

bsunderhus left a comment

feat(react-motion): add useMotion hook #28699

feat(react-motion): add useMotion hook #28699

Conversation

marcosmoura commented Aug 1, 2023 • edited Loading

Context

Example

Return type

fabricteam commented Aug 1, 2023 • edited Loading

📊 Bundle size report

fabricteam commented Aug 1, 2023 • edited Loading

Perf Analysis (@fluentui/react-components)

fabricteam commented Aug 1, 2023 • edited Loading

🕵 fluentuiv9 No visual regressions between this PR and main

codesandbox-ci bot commented Aug 3, 2023 • edited Loading

size-auditor bot commented Aug 3, 2023 • edited Loading

Asset size changes

bsunderhus left a comment

Choose a reason for hiding this comment

marcosmoura commented Aug 1, 2023 •

edited

Loading

fabricteam commented Aug 1, 2023 •

edited

Loading

fabricteam commented Aug 1, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react-components`)

fabricteam commented Aug 1, 2023 •

edited

Loading

codesandbox-ci bot commented Aug 3, 2023 •

edited

Loading

size-auditor bot commented Aug 3, 2023 •

edited

Loading